<template>
  <div class="complaint-info">
    <el-scrollbar class="scroll-wrapper">
      <div class="content">
        <div class="section-title syht14">基本信息</div>
        <div class="list-con">
          <div class="li">
            <div class="li-key">算法名称</div>
            <div class="li-val">{{ comInfo.algorithmName }}</div>
          </div>
          <div class="li">
            <div class="li-key">算法编码</div>
            <div class="li-val">{{ comInfo.algorithmCode }}</div>
          </div>
          <div class="li">
            <div class="li-key">判断规则设置</div>
            <div class="li-val">
              <p class="p-list" v-for="item in comInfo.algorithmRules" :key="item.ruleId">
                {{ item.mergeType | ruleTypeFilter }}{{ item.ruleName }}
              </p>
            </div>
          </div>
          <div class="li">
            <div class="li-key">算法说明</div>
            <div class="li-val">{{ comInfo.algorithmStatement }}</div>
          </div>
          <div class="li">
            <div class="li-key">生效状态</div>
            <div class="li-val">
              <span :style="comInfo.effectiveStatus | statusStyleFilter">
                {{ comInfo.effectiveStatus | statusFilter }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { STATE, RULE_OPER } from '@utility/dict'
export default {
  components: {},
  props: {
    comInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  computed: {},
  filters: {
    statusFilter(status) {
      return STATE[status] || ''
    },
    ruleTypeFilter(ruleType) {
      return ruleType ? `【${RULE_OPER[ruleType]}】` : ''
    },
    statusStyleFilter(status) {
      let style = ''
      switch (status) {
        case STATE.stop:
          style = 'color: #333'
          break
        case STATE.enable:
          style = 'color: #006eff'
          break
        default:
          break
      }
      return style
    },
  },
  created() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
@import '@styles/detailsTable.scss';
.complaint-info {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  .scroll-wrapper {
    flex: 1;
  }
  .content {
    padding: 20px;
    .section-title {
      margin-bottom: 15px;
      padding-left: 15px;
      border-left: 3px solid #3b93f7;
    }
  }
}
</style>
